<template>
  <div class="page-register">
    <div class="header">
      <header>
        <a href="/" class="site-logo"></a>
        <span class="login">
          <em class="bold">已有美团账号?</em>
          <a href="/login" class="btn-login">登录</a>
        </span>
      </header>
    </div>
    <section>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
          <el-button size="mini" round @click="sendMsg" :disabled="count !== 60">发送验证码</el-button>
          <span class="status">{{statusMsg}}</span>
        </el-form-item>

        <el-form-item label="验证码" prop="code">
          <el-input v-model="ruleForm.code"  maxlength="4" />
        </el-form-item>


        <el-form-item label="密码" prop="pwd">
          <el-input v-model="ruleForm.pwd" type="password"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="cpwd">
          <el-input v-model="ruleForm.cpwd" type="password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="register">同意以下协议并注册</el-button>
        </el-form-item>

        <el-form-item>
          <a class="f1" href="http://www.meituan.com/about/terms" target="_blank">《美团网用户协议》</a>
          <a
            class="f1"
            href="https://rules-center.meituan.com/rules-detail/2"
            target="_blank"
          >《美团网隐私协议》</a>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>
<script>
export default {
  layout: "blank",
  data() {
    return {
      statusMsg: '',
      count: 60,
      timerid:null,
      ruleForm: {
        name: "lucking",
        email: "1919193@qq.com",
        code: "",
        pwd: "123456",
        cpwd: "123456"
      },
      rules: {
        name: [
          { 
            required: true, 
            type: 'string',
            message: "请输入用户名", 
            trigger: "blur" 
          }
        ],
        email: [
          {
            required: true,
            type: "email",
            message: "请输入邮箱",
            trigger: "blur"
          }
        ],
        pwd: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else {
                if (this.ruleForm.checkPass !== '') {
                  this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
              }
            }
          }
        ],
        cpwd: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    async sendMsg() {
      const self = this
      let namePass, emailPass
      if (this.timerid !== null) {
        return false
      }
      this.$refs['ruleForm'].validateField('name', (valid) => {
        namePass = valid
      })
      this.statusMsg = ''
      if (namePass) {
        return false
      }
      this.$refs['ruleForm'].validateField('email', (vaild) => {
        emailPass = vaild
      })

      if (!namePass && !emailPass) {

        


        let res = await this.$store.dispatch('api/verify', {
          username: this.ruleForm.name,
          email: this.ruleForm.email
        })

        if (res.status === 200 && res.data && res.data.code ===0 ) {
          self.count = 60;
          self.statusMsg = `验证码已发送，剩余${self.count--}秒`

          self.timerid = setInterval(function(){
              self.statusMsg = `验证码已发送，剩余${self.count--}秒`
              if(self.count === 0){
                clearInterval(self.timerid)
                self.timerid = null
                self.statusMsg = ''
                self.count = 60
              }
          },1000)

        } else {
          this.statusMsg = res.data.msg
        }
      }
    },
    async register() {
      let self = this
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          let res = await this.$store.dispatch('api/signup', {
            username: this.ruleForm.name,
            password: this.ruleForm.pwd,
            email: this.ruleForm.email,
            code: this.ruleForm.code
          })
          if (res.status === 200 ) {
            if (res.data && res.data.code === 0) {
              location.href = '/login'
            } else {
              this.error = res.data.msg
            }
          } else {
            this.error = `服务器出现错误${status}`
          }

          setTimeout(() => {
            self.error = ''
          }, 1500)
        }
      })
    }
  }
};
</script>
<style lang="scss">
@import "@/assets/css/register";
</style>